<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #fault_wrapper {
            width:calc(100% - 64px);
            height:100%;
            padding: 32px;
            overflow-x: scroll;
        }
        #fault_add_form {
            padding: 20px;
            margin-top:50px;
            background:#fff;
            box-shadow: 0 0 10px #757575;
            border-radius:5px;
        }
        .form_input_text {
            width:100%;
            border:none;
            border-bottom:1px #333 solid;
            margin-top:30px;
            outline:none;
            padding:8px;
            font-size:15px;
            color:#333;
        }
        #fault_add_submit {
            width:20%;
            padding:8px;
            float:right;
            border:none;
            outline:none;
            background-color:#f44336;
            color:#fff;
            font-weight:600;
            border-radius:5px;
            margin-top:30px;
            cursor:pointer;
        }
        #fault_add_submit:hover {
            filter: brightness(110%);
        }
    </style>
</head>
<body>
    <div id="fault_wrapper">
        <input type="hidden" value="${request.contextPath}" id="root" />
        <div class="wrapper_head">
            <h2>故障管理</h2>
        </div>
        <form id="fault_add_form" method="post" target="rfFrame">
            <h3>添加故障: </h3>
            <input type="text" class="form_input_text" name="fault_type" id="fault_type" maxlength="20" placeholder="故障类型..." autocomplete="off" />
            <input type="text" class="form_input_text" name="fault_info" id="fault_info" maxlength="50" placeholder="故障信息..." autocomplete="off" />
            <input type="submit" id="fault_add_submit" name="submit" value="添加" />
            <iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>
            <div style="clear:both"></div>
        </form>
    </div>
</body>
<script>
    $("#fault_add_form").submit(function() {
        var faultType = $("#fault_type").val();
        var faultInfo = $("#fault_info").val();
        if(faultType.trim() == "") {
            alert("故障类型不能为空!!");
            return false;
        }
        if(faultInfo.trim() == "") {
            alert("故障信息不能为空!");
            return false;
        }
        $.ajax({
            url: $("#root").val()+"/addFault",
            type: "post",
            data: $(this).serialize(),
            dataType: "text",
            success: function(data) {
                if(data == "success") {
                    alert("添加成功!");
                    $("#fault_type").val("");
                    $("#fault_info").val("");
                } else {
                    alert("添加失败!");
                    return false;
                }
            },
            error: function(data, type, err) {
                alert(type+"---"+err);
                return false;
            }
        })
    })
</script>
</html>